import React from 'react';
import routes from './routes';
import styles from './style.css';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {PERMISSION} from './constants';
import {DATE_FORMAT} from '../constants';
import {Button, Spin, Card, Row, Col} from 'antd';
import {hasPermissions, ListTypeCL} from './utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {formatDateTime, conventEnumValueToString} from '../utils';
import {vehicleOperactionsNature, vehicleProperty, vehicleStatus, productGroupType, LfetOrRight} from '../Enum';
const {Description} = DescriptionList;
export class DetailPanel extends React.PureComponent {
    state = {
        loading: false
    };
    componentDidMount() {
        this.props.init();
        this.ismounted = true;
    }
    componentWillUnmount() {
        this.ismounted = false;
        this.props.onUmount();
    }
    render() {
        const {formatMessage} = this.props.intl;
        const {brands} = this.props.initEnumData;
        const {detailData, loading, permissions} = this.props;
        const {options} = this.props.detailData;
        const operations = [];
        if(hasPermissions(permissions, PERMISSION.update) && hasPermissions(options, PERMISSION.update))
            operations.push(
                <Button key="update" href={`#${routes.update.format(this.props.id)}`} className={styles.btnMargin} size="small">
                    {formatMessage({
                        id: 'detail.btn.update',
                        defaultMessage: '编辑'
                    })}
                </Button>
            );
        return (
            <div className={styles.detail}>
                <Spin spinning={loading || this.state.loading}>
                    <Card title={<Row>
                        <Col span={6}>
                            {formatMessage({
                                id: 'detail.card.title',
                                defaultMessage: '车辆档案信息'
                            })}
                        </Col>
                        <Col className={styles.textAlign} span={18}>
                            {operations}
                        </Col>
                    </Row>}>
                        <DescriptionList>
                            {brands && brands.length > 1 && <Description term={formatMessage({
                                id: 'detail.info.brandName',
                                defaultMessage: '品牌'
                            })}>
                                {detailData.brandName}
                            </Description>}
                            <Description term={formatMessage({
                                id: 'detail.info.vin',
                                defaultMessage: 'VIN'
                            })}>
                                {detailData.vin}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.productCategoryCode',
                                defaultMessage: '车型编号'
                            })}>
                                {detailData.productCategoryCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.productCategoryName',
                                defaultMessage: '车型名称'
                            })}>
                                {detailData.productCategoryName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.productCategoryStyle',
                                defaultMessage: '车型年款'
                            })}>
                                {detailData.productCategoryStyle}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.version',
                                defaultMessage: '版型'
                            })}>
                                {detailData.version}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.mileage',
                                defaultMessage: '行驶里程'
                            })}>
                                {detailData.mileage}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.keyCode',
                                defaultMessage: '钥匙号'
                            })}>
                                {detailData.keyCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.status',
                                defaultMessage: '状态'
                            })}>{conventEnumValueToString(vehicleStatus, detailData.status)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.batchNumber',
                                defaultMessage: '批次号'
                            })}>
                                {detailData.batchNumber}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.productCode',
                                defaultMessage: '物料号'
                            })}>
                                {detailData.productCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.productName',
                                defaultMessage: '物料名称'
                            })}>
                                {detailData.productName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.productGroup',
                                defaultMessage: '产品组分类'
                            })}>
                                {conventEnumValueToString(productGroupType, detailData.productGroup)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.certificateNumber',
                                defaultMessage: '合格证号'
                            })}>
                                {detailData.certificateNumber}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.certificateDate',
                                defaultMessage: '合格证日期'
                            })}>
                                {formatDateTime(detailData.certificateDate, DATE_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.engineCode',
                                defaultMessage: '发动机号'
                            })}>
                                {detailData.engineCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.engineModel',
                                defaultMessage: '发动机型号'
                            })}>
                                {detailData.engineModel}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.transmissionSn',
                                defaultMessage: '变速箱号'
                            })}>
                                {detailData.transmissionSn}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.transmissionModel',
                                defaultMessage: '变速箱型号'
                            })}>
                                {detailData.transmissionModel}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.engineCylinder',
                                defaultMessage: '排量'
                            })}>
                                {detailData.engineCylinder}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.color',
                                defaultMessage: '颜色'
                            })}>
                                {detailData.color}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.transmission',
                                defaultMessage: '手自动'
                            })}>
                                {detailData.transmission}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.lfetOrRight',
                                defaultMessage: '左右舵'
                            })}>
                                {conventEnumValueToString(LfetOrRight, detailData.lfetOrRight)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.rolloutDate',
                                defaultMessage: '下线日期'
                            })}>
                                {formatDateTime(detailData.rolloutDate, DATE_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.inboundDate',
                                defaultMessage: '入库日期'
                            })}>
                                {formatDateTime(detailData.inboundDate, DATE_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.operationsNature',
                                defaultMessage: '运营性质'
                            })}>
                                {conventEnumValueToString(vehicleOperactionsNature, detailData.operationsNature)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.manufacturerName',
                                defaultMessage: '生产工厂'
                            })}>
                                {detailData.manufacturerName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.remark',
                                defaultMessage: '备注'
                            })}>
                                {detailData.remark}
                            </Description>
                        </DescriptionList>
                    </Card>
                    <Card
                        title={formatMessage({
                            id: 'detail.details.title',
                            defaultMessage: '车辆档案扩展信息'
                        })}
                        bordered={false}>
                        <DescriptionList>
                            <Description term={formatMessage({
                                id: 'detail.info.requirementCode',
                                defaultMessage: '需求编号'
                            })}>
                                {detailData.requirementCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.bodyNumber',
                                defaultMessage: '车身编号'
                            })}>
                                {detailData.bodyNumber}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.vehicleProperty',
                                defaultMessage: '车辆属性'
                            })}>
                                {conventEnumValueToString(vehicleProperty, detailData.vehicleProperty)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.certificateRFID',
                                defaultMessage: '合格证RFID'
                            })}>
                                {detailData.certificateRFID}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.vehicleRFID',
                                defaultMessage: '车辆RFID'
                            })}>
                                {detailData.vehicleRFID}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.isBuckup',
                                defaultMessage: '是否建储车'
                            })}>
                                {detailData.isBuckup ? '是' : '否'}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.exportDestination',
                                defaultMessage: '出口国家'
                            })}>
                                {detailData.exportDestination}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.info.contractCompany',
                                defaultMessage: '合同单位'
                            })}>
                                {detailData.contractCompany}
                            </Description>
                        </DescriptionList>
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Button type="primary" disabled={loading} onClick={this.props.onCancel}>
                        {formatMessage({
                            id: 'detail.btn.return',
                            defaultMessage: '返回'
                        })}
                    </Button>
                </div>
            </div>
        );
    }
}
DetailPanel.propTypes = {
    detailData: PropTypes.object.isRequired,
    id: PropTypes.string.isRequired,
    init: PropTypes.func.isRequired,
    initEnumData: PropTypes.object.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onUmount: PropTypes.func.isRequired,
    intl: PropTypes.object
};
import {connect} from 'react-redux';
import {createSelector} from 'reselect';
import {getDetail, clearData, querySearch} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getDetailData = selectorFactory(['page', 'domainData', 'detail', 'data']);
const getinitEnumData = createSelector(
    state => state.getIn(['page', 'domainData', 'init']),
    init => {
        const initData = init.toJS();
        const brands = initData.brands ? ListTypeCL(initData.brands) : [];
        return {
            brands, // 品牌
            initData
        };
    }
);
const mapStateToProps = (state, ownProps) => ({
    id: ownProps.id,
    loading: state.getIn(['page', 'domainData', 'detail', 'isFetching']),
    detailData: getDetailData(state),
    initEnumData: getinitEnumData(state),
    permissions: getPermissions(state)
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    init: () => dispatch(getDetail(ownProps.id)),
    onCancel: () => {
        ownProps.history.push(routes.query.url());
    },
    successReturn: () => {
        dispatch(querySearch());
        ownProps.history.push(routes.query.url());
    },
    onUmount: () => dispatch(clearData()),
});

export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
